
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")

//提取css
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
//压缩css
const OptimizeCssAssetswebpackPlugin = require("optimize-css-assets-webpack-plugin")
module.exports = {
    entry: {
        commonCSS: "./src/js/common-js/commonCss.js",
        dom: "./src/js/common-js/dom.js",
        http: "./src/js/common-js/http.js",
        utils: "./src/js/common-js/utils.js",
        swiper: './src/lib/swiper/swiper-bundle.js', // 轮播插件
        index: "./src/js/index.js",
        register: "./src/js/register.js",
        login: "./src/js/login.js",
        advert: "./src/js/advert.js",
        sport: "./src/js/sport.js",
        mine: "./src/js/mine.js",
        mine_edit: "./src/js/mine-edit.js",
        course_details: "./src/js/course-details.js",
        sport_data: "./src/js/sport-data.js",
        video: "./src/js/video.js"
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "js/[name]-[hash:8].js"
    },
    //加载器
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: "../"
                        }
                    },
                    "css-loader"
                ]
            },
            {
                test: /\.less$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: "../"
                        }
                    },
                    "css-loader",
                    "less-loader"
                ]
            },
            {
                test: /\.(jpg|png|jpeg|gif)$/,
                loader: "url-loader",
                options: {
                    name: "[hash:8].[ext]",
                    limit: 2 * 1024 * 1024,
                    esModule: false
                }
            },
            {
                test: /\.html$/,
                loader: "html-loader"
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: "file-loader",
                options: {
                    name: "[hash:16].[ext]",
                    outputPath: "fonts"
                }
            },
            {
                test: /\.js$/,
                loader: "babel-loader",
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/advert.html",
            filename: "./advert.html",
            chunks: ["advert", "commonCSS", "dom"]
        }),
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            filename: "./index.html",
            chunks: ["index", "commonCSS", "dom", "utils", "http", "swiper"]
        }),
        new HtmlWebpackPlugin({
            template: "./src/register.html",
            filename: "./register.html",
            chunks: ["register", "commonCSS", "dom", "utils", "http"]
        }),
        new HtmlWebpackPlugin({
            template: "./src/login.html",
            filename: "./login.html",
            chunks: ["login", "commonCSS", "dom", "utils", "http"]
        }),
        new HtmlWebpackPlugin({
            template: "./src/sport.html",
            filename: "./sport.html",
            chunks: ["sport", "commonCSS", "dom", "utils", "http"]
        }),
        new HtmlWebpackPlugin({
            template: "./src/mine.html",
            filename: "./mine.html",
            chunks: ["mine", "commonCSS", "dom", "utils", "http"]
        }),
        new HtmlWebpackPlugin({
            template: "./src/mine-edit.html",
            filename: "./mine-edit.html",
            chunks: ["mine_edit", "commonCSS", "dom", "utils", "http"]
        }),
        new HtmlWebpackPlugin({
            template: "./src/course-details.html",
            filename: "./course-details.html",
            chunks: ["course_details", "commonCSS", "dom", "utils", "http"]
        }),
        new HtmlWebpackPlugin({
            template: "./src/sport-data.html",
            filename: "./sport-data.html",
            chunks: ["sport_data", "commonCSS", "dom", "utils", "http"]
        }),
        new HtmlWebpackPlugin({
            template: "./src/video.html",
            filename: "./video.html",
            chunks: ["video", "commonCSS", "dom", "utils", "http"]
        }),
        new MiniCssExtractPlugin({
            filename: "css/[name].css"
        }),
        new OptimizeCssAssetswebpackPlugin(),
        new CleanWebpackPlugin()
    ],
    //模式
    mode: "development",
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'), // 启动服务器目录
        compress: true, // 启动gzip
        port: 666,  // 端口
        open: true, // 自动打开服务
        openPage: "index.html"
    },
}